import React from "react";
import { Card, Tabs, Typography, Button, Row, Col, Image } from "antd";
import {
  PlayCircleOutlined,
  InfoCircleOutlined,
  BookOutlined,
} from "@ant-design/icons";
import "./index.less";

const { Title, Paragraph } = Typography;
const { TabPane } = Tabs;

const CardList: React.FC = () => {
  const cards = [
    {
      title: "新增产品",
      icon: "https://gw.alipayobjects.com/zos/rmsportal/WdGqmHpayyMjiEhcKoVE.png",
      description:
        "在中台产品的研发过程中，会出现不同的设计规范和实现方式，但其中往往存在很多类似的页面和组件。",
      actions: ["操作一", "操作二"],
    },
    {
      title: "Alipay",
      icon: "https://gw.alipayobjects.com/zos/rmsportal/WdGqmHpayyMjiEhcKoVE.png",
      description:
        "在中台产品的研发过程中，会出现不同的设计规范和实现方式，但其中往往存在很多类似的页面和组件。",
      actions: ["操作一", "操作二"],
    },
  ];

  return (
    <div className="card-list-page" data-oid="fpegxwc">
      <div className="header" data-oid=":zdp_q1">
        <Title level={2} data-oid="-1u6yw4">
          卡片列表
        </Title>
        <Image
          width={200}
          src="https://gw.alipayobjects.com/zos/rmsportal/WdGqmHpayyMjiEhcKoVE.png"
          alt="示例图"
          data-oid="sri:ssm"
        />
      </div>

      <Paragraph data-oid="-tcvr_f">
        段落示意：蚂蚁金服务设计平台
        ant.design，用最小的工作量，无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。
      </Paragraph>

      <Tabs defaultActiveKey="quick-start" data-oid="k3urfco">
        <TabPane
          tab={
            <span data-oid="7lm-e3.">
              <PlayCircleOutlined data-oid="vulpzf4" />
              快速开始
            </span>
          }
          key="quick-start"
          data-oid="osenrtt"
        />

        <TabPane
          tab={
            <span data-oid="kv88pqx">
              <InfoCircleOutlined data-oid="g8t4_bt" />
              产品简介
            </span>
          }
          key="product-intro"
          data-oid="imsw80v"
        />

        <TabPane
          tab={
            <span data-oid="8ax5:ux">
              <BookOutlined data-oid="9mnc3cq" />
              产品文档
            </span>
          }
          key="product-docs"
          data-oid="gjzl5:9"
        />
      </Tabs>

      <Row gutter={[16, 16]} className="card-grid" data-oid=".051jfh">
        {cards.map((card, index) => (
          <Col xs={24} sm={12} md={8} lg={6} key={index} data-oid=".n-5op1">
            <Card className="card-item" data-oid="p96-d0_">
              <div className="card-header" data-oid="o12ue7o">
                <Image
                  width={48}
                  height={48}
                  src={card.icon}
                  alt={card.title}
                  className="card-icon"
                  data-oid="e2:mm31"
                />

                <Title level={4} className="card-title" data-oid="7bpt83y">
                  {card.title}
                </Title>
              </div>
              <Paragraph className="card-description" data-oid=":6b8oex">
                {card.description}
              </Paragraph>
              <div className="card-actions" data-oid="lc08253">
                {card.actions.map((action, actionIndex) => (
                  <Button key={actionIndex} type="link" data-oid="ldnsl2f">
                    {action}
                  </Button>
                ))}
              </div>
            </Card>
          </Col>
        ))}
      </Row>
    </div>
  );
};

export default CardList;
